<template>
  <div class="wrapper">
    <ul class="list" v-show="!show">
      <li>
          <div class="checkbox">
              <checkbox :checked="checked" class="check"/>
          </div>
          <div class="img"><img src="/static/images/img.jpg" alt=""></div>
          <div class="desc">
              <h5>BCD牌精选东北大米</h5>
              <div class="count">
                <cart-control></cart-control>
              </div>
              <p>￥250.00+70积分</p>
              <span>25kg装</span>
              <span class="money">￥250.00/件</span>
          </div>
      </li>
      <li>
          <div class="checkbox">
              <checkbox :checked="checked" class="check"/>
          </div>
          <div class="img"><img src="/static/images/img.jpg" alt=""></div>
          <div class="desc">
              <h5>BCD牌精选东北大米</h5>
              <div class="count">
                <cart-control></cart-control>
              </div>
              <p>￥250.00+70积分</p>
              <span>25kg装</span>
              <span class="money">￥250.00/件</span>
          </div>
      </li><li>
          <div class="checkbox">
              <checkbox :checked="checked" class="check"/>
          </div>
          <div class="img"><img src="/static/images/img.jpg" alt=""></div>
          <div class="desc">
              <h5>BCD牌精选东北大米</h5>
              <div class="count">
                <cart-control></cart-control>
              </div>
              <p>￥250.00+70积分</p>
              <span>25kg装</span>
              <span class="money">￥250.00/件</span>
          </div>
      </li>
    </ul>
    <div class="total">
        <div class="left">
            <span>总计:</span>
            <span>30件</span>
        </div>
        <div class="left">
            <span>合计:</span>
            <span>￥10000.00</span>
        </div>
    </div>
    <div class="btn-wrapper">
      <p>退款后，使用的积分及优惠券将无法返回</p>
      <button form-type="submit" class="btn btn1">取消</button>
      <button form-type="submit" class="btn btn2">确定</button>
    </div>
  </div>
</template>
<script>
import cartControl from '../../components/cartcontrol'
export default {
  components: {
    cartControl
  }
}
</script>
<style lang="scss" scoped>
@import 'static/css/base.scss';
.wrapper{
  .list{
    margin-top: 12rpx;
    color: #333;
    font-size: 26rpx;
    li{
        display: flex;
        background: #fff;
        padding: 10rpx 20rpx;
        margin-bottom: 4rpx;
        border-bottom: 1rpx solid #f4f4f4;
        align-items: center;
        .img{
            width: 180rpx;
            height: 125rpx;
            overflow: hidden;
            img{
            width: 100%;
            height: 100%;
            }
        }
        .desc{
            flex: 1;
            margin-left: 20rpx;
            position: relative;
            h5{
              width: 270rpx;
              @extend %text-limit
            }
            p{
            font-size: 28rpx;
            color: #ed1c24;
            margin: 30rpx 0;
            }
            span{
            color: #666;
            }
            .count{
                position: absolute;
                top: 0;
                right: 0;
            }
            .money{
                position: absolute;
                bottom: 0;
                right: 0;
                color: #ed1c24;
            }
        }
    
    }
  }
  .total{
    display: flex;
    font-size: 28rpx;
    background: #fff;
    padding: 0 20rpx;
    .left{
        flex: 1;
        text-align: right;
        height: 80rpx;
        line-height: 80rpx;
        span{
            &:last-child{
                color: #ed1c24;

            }
        }
    }
  }
  .btn-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx 20rpx;
    font-size: 22rpx;
    background: #fff;
    p{
      margin-right:10rpx;
    }
    .btn{
      width: 188rpx;
      height: 60rpx;
      line-height: 60rpx;
      background: #ff9933;
      color: #fff;
      border-radius: 6rpx;
      text-align: center;
      border:none;
      font-size: 28rpx;
    }
    .btn1{
      background: #22ac38;
      margin-right:10rpx;
    }
    .btn2{
     
    }
  }
}
</style>
